<!DOCTYPE html>
<html>
	<head>
		<title>菜单分配</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
		<style type="text/css">
			.el-header {
				/*background-color: #B3C0D1;*/
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<el-container>
					<el-header>
						<el-button size="small" type="primary" icon="el-icon-check" @click.native="save">保存</el-button>
						<el-button size="small" type="primary" icon="el-icon-delete" @click.native="remove">清空</el-button>
					</el-header>
				  	<el-main>
						<el-table :data="menuList" ref="multipleTable" style="width: 100%;margin-bottom: 20px;" row-key="menu_id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @select="handleSelect" @select-all="handleSelectAll">
							<el-table-column type="selection" width="90"></el-table-column>
							<el-table-column prop="menu_name" label="菜单名称" sortable></el-table-column>
							<el-table-column prop="intro" label="说明" sortable></el-table-column>
						</el-table>
				  	</el-main>
				</el-container>
			</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, // 超级对象
					id: sa.p('id', 0),
					p: {},
					menuList: [],
					roleMenu: [],
					checkAll: false,
				},
				methods: {
					// 刷新
					f5: function(){
						// 获取菜单
						sa.ajax(router.getResMenuTree, {}, function(res){
							this.menuList = res;
							// 获取角色已选择的资源
							sa.ajax(router.getRoleMenu, {role_id: this.id}, function(res){
								this.roleMenu = res;
								this.initSelect();
							}.bind(this), {type:'get'});
						}.bind(this), {type:'get'});
						
					},
					handleSelectAll: function(selection) {
						if(this.checkAll) {
							this.menuList.forEach(menu => {
								this.$refs.multipleTable.toggleRowSelection(menu, false);
								menu.children.forEach(child => {
									this.$refs.multipleTable.toggleRowSelection(child, false);
								});
							});
							this.roleMenu = [];
							this.checkAll = false;
						} else {
							selection.forEach(menu => {
								if(menu.children != undefined) {
									menu.children.forEach(child => {
										if(this.roleMenu.indexOf(child['menu_id']) == -1) {
											this.roleMenu.push(child['menu_id']);
										}
									});
								} else {
									if(this.roleMenu.indexOf(menu['menu_id']) == -1) {
										this.roleMenu.push(menu['menu_id']);
									}
								}
							});
							this.checkAll = true;
						}
						this.initSelect();
					},
					handleSelect: function(selection, row) {
						let selected = this.roleMenu.indexOf(row['menu_id']);
						if(selected > -1) {
							this.roleMenu.splice(selected, 1);
						} else {
							this.roleMenu.push(row['menu_id']);
						}
						console.log(this.roleMenu);
					},
					initSelect: function() {
						this.$nextTick(() => {
							this.menuList.forEach(menu => {
								menu.children.forEach(child => {
									if(this.roleMenu.indexOf(child['menu_id']) > -1) {
										this.$refs.multipleTable.toggleRowSelection(child, true);
									} else {
										this.$refs.multipleTable.toggleRowSelection(child, false);
									}
								});
							});
						});
					},
					save: function() {
						sa.ajax(router.updateRoleMenu, {role_id: this.id, menu_id: this.roleMenu}, function(res){

						}.bind(this));
					},
					remove: function() {
						this.roleMenu = [];
						this.initSelect();
					}
				},
				created: function(){
					this.f5();
					sa.onInputEnter();// 监听输入框的回车事件，执行查询
				}
			});
		</script>
	</body>
</html>